<template>
	<view :class="['container',{'dark':theme=='dark'}]">
		<!-- 间隔曹 -->
		<u-gap height="80" bg-color=""></u-gap>
		<u-form :model="form" ref="uForm">
			<u-form-item :label="$t('bico.W394')" label-width='160' prop="coin">
				<u-input v-model="form.coin"  disabled />
				<u-select :confirm-text="confirmText" :cancel-text="cancelText" v-model="selectShow" :list="selectList" @confirm="confirm"></u-select>
				<u-button type="primary"  shape="square" @click="selectShow = true" style="font-size: 14px;height: 30px;line-height: 30px;width: 50px;">{{$t('bico.W396')}}</u-button>
			</u-form-item>
			<!-- 间隔曹 -->
			<u-gap height="40" bg-color=""></u-gap>

			<u-form-item :label="$t('bico.W395')" label-width='160' prop="orderType">
				<u-radio-group v-model="form.orderType" @change="radioGroupChange">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.code"
							 :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- 间隔曹 -->
			<u-gap height="40" bg-color=""></u-gap>
			<u-form-item :label="$t('bico.W398')" prop="payWay" label-width='160' v-show="accountShow">
				<u-input v-model="form.accountLabel" disabled />
				<u-select :confirm-text="confirmText" :cancel-text="cancelText" mode="mutil-column-auto" v-model="accountShow2" :list="checkboxList" @confirm="confirm2">
				</u-select>
				<u-button type="primary" shape="square" @click="accountShow2 = true" style="font-size: 14px;height: 30px;line-height: 30px;width: 50px;">{{$t('bico.W396')}}</u-button>
			</u-form-item>

			<u-form-item :label="$t('bico.W399')" label-width='160' prop="price" :placeholder="$t('bico.W400')">
				<u-input v-model="form.price" :placeholder="$t('bico.W400')"/>
			</u-form-item>
			<!-- 间隔曹 -->
			<u-gap height="40" bg-color=""></u-gap>
			<u-form-item :label="$t('bico.W401')" label-width='160' prop="count" :placeholder="$t('bico.W402')">
				<u-input v-model="form.count"  :placeholder="$t('bico.W402')"/>
			</u-form-item>
			<!-- 间隔曹 -->
			<u-gap height="40" bg-color=""></u-gap>
			<u-form-item :label="$t('bico.W403')" label-width='160' prop="minCount">
				<u-input v-model="form.minPrice" :placeholder="$t('bico.W404')" />
				<u-input value='——' disabled />
				<u-input v-model="form.minCount" :placeholder="$t('bico.W405')" />
			</u-form-item>
			<!-- 间隔曹 -->
			<u-gap height="80" bg-color=""></u-gap>
			<u-form-item label="">
				<u-input v-model="form.remark" type='textarea' :border-bottom="true" :border="false" :placeholder="$t('bico.W406')" :auto-height='true' />
			</u-form-item>
		</u-form>
		<!-- 间隔曹 -->
		<u-gap height="80" bg-color=""></u-gap>
		<u-button shape="square" @click="submit" type="primary">{{$t('bico.W397')}}</u-button>
	</view>
</template>

<script>
    import {
        domain
    } from '@/common/domain.js'
    import {
        mapState,
        mapActions,
        mapGetters
    } from 'vuex';
    import uniPopup from '@/components/uni-popup2.vue';
    import {
        myMixins
    } from '@/common/myMixins.js' //加入全局下拉刷新

    import {
        cnyPayList,
        otcSell,
        otcBuy,contractOptionConfig
    } from '../../common/apiString.js'
    export default {
        data() {
            return {
                confirmText:this.$t('login.c1'),
                cancelText:this.$t('login.c2'),
                paywayArr: [],
                accountShow: false,
                accountShow2: false,
                selectShow: false,
                form: {
                    coin: '',
                    orderType: '',
                    payWay: '',
                    account: '',
                    accountLabel: '',
                    price: '',
                    count: '',
                    minPrice: '',
                    minCount: '',
                    remark: ''
                },
                selectList: [{
                    value: 'USDT',
                    label: 'USDT'
                }, {
                    value: 'BTC',
                    label: 'BTC'
                },{
                    value: 'ETH',
                    label: 'ETH'
                }],
                checkboxList: [{
                    label: this.$t('bico.W407'),
                    value: 'ALI_PAY',
                    children: [{
                        label: this.$t('bico.W408'),
                        value: 'ALI_PAY',
                    }, {
                        label: this.$t('bico.W409'),
                        value: 'ALI_PAY'
                    }, ],
                },
                    {
                        label: this.$t('bico.W410'),
                        value: 'WE_CHAT',
                        children: [],
                    },
                    {
                        label: this.$t('bico.W411'),
                        value: 'BANK',
                        children: [],
                    },
					{
					    label: this.$t('bico.swift'),
					    value: 'SWIFT',
					    children: [],
					},
					{
					    label: this.$t('bico.paypal'),
					    value: 'PAYPAL',
					    children: [],
					},
					{
					    label: this.$t('bico.west'),
					    value: 'WEST',
					    children: [],
					},
					
                ],
                radioList: [{
                    name: this.$t('bico.W412'),
                    code: 'sell',
                    disabled: false
                },
                    {
                        name: this.$t('bico.W413'),
                        code: 'buy',
                        disabled: false
                    }
                ],
                radio: '',
                switchVal: false,
                hitNum: 0,
                rules: {
                    payWay: [{
                        required: true,
                        message: this.$t('bico.W414'),
                    }],
                    'coin': [{
                        required: true,
                        message: this.$t('bico.W415'),
                    }],
                    'payWay': [{
                        required: true,
                        message: this.$t('bico.W416'),
                    }],
                    'orderType': [{
                        required: true,
                        message: this.$t('bico.W417'),
                    }],
                    'price': [{
                        required: true,
                        message: this.$t('bico.W418'),
                        trigger: ['blur', 'change']
                    }, {
                        type: 'number',
                        message: this.$t('bico.W419'),
                        trigger: ['blur', 'change']
                    }],
                    'count': [{
                        required: true,
                        type: 'number',
                        message: this.$t('bico.W420'),
                        trigger: ['blur', 'change']
                    }, {
                        type: 'number',
                        message: this.$t('bico.W421'),
                        trigger: ['blur', 'change']
                    }],

                }
            };
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        },
        onShow() {
            this.getCoinConfig()
            this.getPayWayList()
        },
        computed: {
            ...mapState({
                theme: state => state.theme
            }),
        },
        onLoad() {
            uni.setNavigationBarTitle({
                title: this.$t('bico.W422'),
            })
            this.$utils.setTheme(this.theme);
            // this.legalMgrPage()
            //this.verifySwitch()
        },
        methods: {
            getCoinConfig(){
                var that = this
                that.$utils.initDataToken({
                    url: contractOptionConfig,
                    type: 'post'
                }, (res, msg) => {
                    that.selectList = []
                    res.forEach(item=>{
                        that.selectList.push({
                            label: item,
                            value: item,
                        })
                    })
                })
            },
            // 选中任一checkbox时，由checkbox-group触发
            checkboxGroupChange(e) {
                this.form.payWay = e.toString()
                console.log(this.form.payWay)
            },
            // 选中任一radio时，由radio-group触发

            radioGroupChange(e) {
                var that = this
                that.form.payWay = ''
                that.form.account = ''
                that.form.accountLabel = ''
                that.accountShow = true
                if (e != 'buy') {
                    var arr = that.paywayArr
                    that.checkboxList.forEach(item => {
                        item.children = []
                    })

                    if (arr.length > 0) {
                        arr.forEach(element => {
                            if (element.type == 'ALI_PAY') {
                                that.checkboxList[0].children.push({
                                    label: element.idcard,
                                    value: element.paymentId
                                })
                            } else if (element.type == 'WE_CHAT') {
                                that.checkboxList[1].children.push({
                                    label: element.idcard,
                                    value: element.paymentId
                                })
                            } else if (element.type == 'BANK') {
                                that.checkboxList[2].children.push({
                                    label: element.idcard,
                                    value: element.paymentId
                                })
                            }else if (element.type == 'SWIFT') {
								that.checkboxList[3].children.push({
								    label: element.idcard,
								    value: element.paymentId
								})
							} else if (element.type == 'PAYPAL') {
								that.checkboxList[4].children.push({
								    label: element.idcard,
								    value: element.paymentId
								})
							} else if (element.type == 'WEST') {
								that.checkboxList[5].children.push({
								    label: element.idcard,
								    value: element.paymentId
								})
							}
							
                        });
                        if(that.checkboxList[0].children.length == 0){that.checkboxList[0].children.push({label: "无",value: ''})}
                        if(that.checkboxList[1].children.length == 0){that.checkboxList[1].children.push({label: "无",value: ''})}
                        if(that.checkboxList[2].children.length == 0){that.checkboxList[2].children.push({label: "无",value: ''})}
						if(that.checkboxList[3].children.length == 0){that.checkboxList[3].children.push({label: "无",value: ''})}
						if(that.checkboxList[4].children.length == 0){that.checkboxList[4].children.push({label: "无",value: ''})}
						if(that.checkboxList[5].children.length == 0){that.checkboxList[5].children.push({label: "无",value: ''})}
                    }
                }else{
                    that.checkboxList.forEach(item => {
                        delete item.children
                    })
                }
            },
            // 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
            confirm(e) {
                this.form.coin = e[0].value
            },
            confirm2(e) {
                if (this.form.orderType != 'buy') {
                    if(e[1].value==''){
                        this.$u.toast(this.$t('bico.W423'),);
                        return
                    }
                    this.form.account = e[1].value
                    this.form.accountLabel = e[1].label
                }
                this.form.payWay = e[0].value
                this.form.accountLabel = e[0].label
            },
            getPayWayList() {
                var that = this
                that.$utils.initDataToken({
                    url: cnyPayList,
                    data: {
                        size: 100
                    },
                    type: 'post'
                }, (res, msg) => {
                    that.paywayArr = res.records;
                })
            },
            submit() {
                var that = this
                that.$refs["uForm"].validate(valid => {
                    if (valid) {
                        if (!that.checkData()) {
                            return
                        }
                        var data = {
                            coin: that.form.coin,
                            unitPrice: that.form.price,
                            number: that.form.count,
                            lowNumber: that.form.minCount,
                            lowPrice: that.form.minPrice,
							remark:that.form.remark
                        }
                        if (that.form.orderType == 'buy') { //
                            that.hitNum += that.hitNum + 1;
                            if (that.hitNum == 1) {
                                data.payMethod = that.form.payWay

                                that.$utils.initDataToken({
                                    url: otcBuy,
                                    data: data,
                                    type: 'post'
                                }, (res, msg) => {
                                    if (msg.length > 0) {
                                        that.hitNum = 0
                                        this.$utils.showLayer(msg);
                                    } else {
                                        this.$utils.showLayer(this.$t('bico.W424'),);
                                        setTimeout(() => {
                                            uni.navigateBack();
                                        }, 1500);
                                    }
                                })
                            }
                        } else {
                            data.payMethod = that.form.payWay
                            data.paymentId = that.form.account
                            that.$utils.initDataToken({
                                url: otcSell,
                                data: data,
                                type: 'post'
                            }, (res, msg) => {
                                if (msg.length > 0) {
                                    that.hitNum = 0
                                    this.$utils.showLayer(msg);
                                } else {
                                    this.$utils.showLayer(this.$t('bico.W424'),);
                                    setTimeout(() => {
                                        uni.navigateBack();
                                    }, 1500);
                                }
                            })
                        }
                    } else {
                        console.log(this.$t('bico.W425'),);
                    }
                });
            },
            checkData() {
                var that = this
                if (that.$utils.isEmpty(that.form.minPrice)) {
                    this.$u.toast(this.$t('bico.W426'),);
                    return false
                }
                if (that.$utils.isEmpty(that.form.minCount)) {
                    this.$u.toast(this.$t('bico.W427'),);
                    return false
                }
                if (Number(that.form.minPrice) <= 0) {
                    this.$u.toast(this.$t('bico.W420'),);
                    return false
                }
                if (Number(that.form.minCount) > Number(that.form.count)) {
                    this.$u.toast(this.$t('bico.W429'),);
                    return false
                }
                return true
            }
        }
    }
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}
	.container {
		width: 100%;
		height: 100%;
		padding: 0vw 4vw 0;












	}



</style>
